<template>
  <div class="register_wrap">
    <div class="register_zhuce">
      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="用户名">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input placeholder="请输入密码" v-model.trim="form.password" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认密码">
          <el-input placeholder="请输入密码" v-model.trim="form.repeate_password" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :plain="true" @click="onRegister">注册</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {Message} from 'element-ui';
// import request from "@/api/request.js"
import {req_register} from '@/api/registerLogin.js';
export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
        repeate_password: "",

      },
    };
  },
    methods: {
    async onRegister() {
      console.log('注册');
      //收集用户名密码

      console.log(
        this.form.name,
       this.form.password,
        this.form.repeate_password
        );
      //对比密码/重复密码是否一致，不一致清空重新输入
      if(this.form.password === this.form.repeate_password){
        console.log("发送ajax请求");

        // let result = await request('post','/register',
        // {
        //   user_name:this.form.name,
        //   password:this.form.password,
        // },"form");

          //变成对象形式
        // let result = await request({
          // method:'post',
          // url:'/register',
          // arg:{
          //   user_name:this.form.name,
          //   password:this.form.password,
          // },
          // headerType:"form",
        // });
          let result = await req_register({
            method:'post',
          url:'/register',
          arg:{
            user_name:this.form.name,
            password:this.form.password,
          },
          headerType:"form",
        });

        console.log(result);
        //注册后跳转登录
        this.$router.push({
          name:'login',
        });

        Message({
          showClose: true,
          message: '注册成功',
          type: 'success'
        });

      }else{

        Message({
          showClose: true,
          message: '请重新输入密码',
          type: 'error'
        });
        //错误后清空输入框
        this.form.password = '';
        this.form.repeate_password = '';
      }
    },
    onReset() {
      this.form.name = '';
      this.form.password = '';
        this.form.repeate_password = '';
    },
  },
};
</script>

<style lang="scss" scoped>
.register_wrap {
  background-image: url("~@a/img/bjt.jpeg");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .register_zhuce {
    background-image: url("~@a/img/bggrey.jpg");
    background-size: 100% 100%;
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>